<template>
  <div class="GykjMap-reservoir">
    <div class="GykjMap-reservoir-tabs">
      <Tabs type="card" v-model="activeTab" :animated="false" @on-click="tabsClick">
        <TabPane label="基础信息" name="info"></TabPane>
        <TabPane label="水位趋势图" name="echart"></TabPane>
      </Tabs>
    </div>
    <div class="GykjMap-reservoir-content">
      <div class="GykjMap-reservoir-table" v-show="activeTab === 'info'">
        <table class="table" border>
          <tbody>
            <tr>
              <td>塘库名称</td>
              <td>{{fliterData('pool_name')}}</td>
              <td>所属区镇</td>
              <td>{{fliterData('town')}}</td>
            </tr>
            <tr>
              <td>兴建时间</td>
              <td>{{fliterData('build')}}</td>
              <td>集雨面积(KM2)</td>
              <td>{{fliterData('rainwater_area')}}</td>
            </tr>
            <tr>
              <td>校核总库容(万立米)</td>
              <td>{{fliterData('check_capacity')}}</td>
              <td>校核水位(米)</td>
              <td>{{fliterData('check_level')}}</td>
            </tr>
            <tr>
              <td>设计库容(万立米)</td>
              <td>{{fliterData('design_capacity')}}</td>
              <td>设计水位(米)</td>
              <td>{{fliterData('design_level')}}</td>
            </tr>
            <tr>
              <td>正常水位(米)</td>
              <td>{{fliterData('normal_capacity')}}</td>
              <td>正常库容(万立米)</td>
              <td>{{fliterData('normal_level')}}</td>
            </tr>
            <tr>
              <td>死水位(米)</td>
              <td>{{fliterData('dead_level')}}</td>
              <td>死库容(万立米)</td>
              <td>{{fliterData('dead_capacity')}}</td>
            </tr>
            <tr>
              <td>主坝坝顶高程(米)</td>
              <td>{{fliterData('maindike_topheight')}}</td>
              <td>主坝主坝长(米)</td>
              <td>{{fliterData('maindike_length')}}</td>
            </tr>
            <tr>
              <td>主坝最大坝高(米)</td>
              <td>{{fliterData('maindike_height')}}</td>
              <td>主坝坝顶宽(米)</td>
              <td>{{fliterData('maindike_width')}}</td>
            </tr>
            <tr>
              <td>副坝座数</td>
              <td>{{fliterData('subdike_qty')}}</td>
              <td>副坝坝顶高程(米)</td>
              <td>{{fliterData('subdike_topheight')}}</td>
            </tr>
            <tr>
              <td>副坝坝长(米)</td>
              <td>{{fliterData('subdike_length')}}</td>
              <td>放水涵孔数</td>
              <td>{{fliterData('water_hole')}}</td>
            </tr>
            <tr>
              <td>放水涵断面尺寸(宽×高)(米)</td>
              <td>{{fliterData('water_fracture')}}</td>
              <td>放水涵长(米)</td>
              <td>{{fliterData('water_length')}}</td>
            </tr>
            <tr>
              <td>放水涵底高程(米)</td>
              <td>{{fliterData('water_height')}}</td>
              <td>放水涵设计流量(M3/S)</td>
              <td>{{fliterData('water_flow')}}</td>
            </tr>
            <tr>
              <td>溢洪道顶高程(米)</td>
              <td>{{fliterData('flood_topheight')}}</td>
              <td>溢洪道宽(米)</td>
              <td>{{fliterData('flood_width')}}</td>
            </tr>
            <tr>
              <td>溢洪道流量(M3/S)</td>
              <td>{{fliterData('flood_flow')}}</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="GykjMap-reservoir-echarts" v-show="activeTab === 'echart'">
        <div class="GykjMap-reservoir-nodata" v-show="!showEchart"></div>
        <div class="GykjMap-reservoir-echart" v-show="showEchart" ref="echart"></div>
      </div>
    </div>

    <Loading v-show="loading" />
  </div>
</template>

<script>
import Loading from '../../public/loading/loading'
import axios from 'axios'
import echarts from 'echarts'

const echartExample = (data) => ({
  title: {
    text: '实时水位趋势',
    x: 'center',
    top: 20
  },
  grid: {
    left: 70
  },
  tooltip: {
    trigger: 'axis'
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: data.x
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      formatter: '{value} m'
    }
  },
  series: [{
    name: '水位',
    type: 'line',
    data: data.outer
  }]
})

export default {
  props: {
    stnNo: {
      type: String,
      default: ''
    },
    source: {
      type: String,
      default: ''
    },
    isInit: {
      type: Boolean,
      default: true
    }
  },
  components: {
    Loading
  },
  created () {
    this.echart = null
  },
  mounted () {
    if (this.isInit) {
      this.initData()
    }
  },
  data () {
    return {
      resultData: {},
      activeTab: 'info',
      loading: false,
      showEchart: false
    }
  },
  methods: {
    fliterData (key) {
      if (this.resultData[key] === 0) {
        return this.resultData[key]
      }
      return this.resultData[key] || '--'
    },
    tabsClick (name) {
      if (!this.echart) {
        return
      }

      if (name === 'echart') {
        this.$nextTick(() => {
          this.echart.resize()
        })
      }
    },
    initEchart (data) {
      if (!data) {
        return
      }
      this.showEchart = true
      setTimeout(() => {
        if (!this.echart) {
          this.echart = echarts.init(this.$refs.echart)
        }
        this.echart.setOption(echartExample(data))
      }, 20)
    },
    initData (stnNo, data = {}) {
      this.resultData = data
      this.activeTab = 'info'
      this.showEchart = false
      this.api = 'http://183.238.82.216:9080/fullservice/http/reservoirMajor10'

      if (stnNo) {
        this.api += `?stn_no=${stnNo}`
      } else {
        if (this.source) {
          this.api = this.source
        } else if (!this.source && this.stnNo) {
          this.api += `?stn_no=${this.stnNo}`
        } else {
          return
          // throw new Error('必须传入api源地址或水库编号')
        }
      }

      this.getData()
    },
    getData () {
      this.loading = true

      axios.get(this.api, {})
        .then(response => {
          this.loading = false
          const res = response.data

          if (res.code === '0000' && res.result.length) {
            let time = []
            let inner = []
            let outer = []

            res.result.reverse().map(item => {
              let str = item.data_time
              str = str.split(' ').join('\n')
              time.push(str)
              inner.push(item.water_level_in)
              outer.push(item.water_level)
            })

            const data = {
              x: time,
              inner: inner,
              outer: outer
            }

            this.initEchart(data)
          } else {
            this.$emit('data_err', '找不到该水库的实时数据')
            console.log('找不到该水库的实时数据')
          }
        })
        .catch(err => {
          this.loading = false
          this.$emit('data_err', `获取该数据源失败，错误代码：${err}`)
          console.log(`获取该数据源失败，错误代码：${err}`)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.GykjMap-reservoir {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  .GykjMap-reservoir-tabs {
    position: absolute;
    left: 5px;
    right: 5px;
    top: 5px;
  }
  .GykjMap-reservoir-content {
    position: absolute;
    left: 5px;
    right: 5px;
    top: 40px;
    bottom: 5px;
    .GykjMap-reservoir-table {
      width: 100%;
      .table {
        width: 100%;
        font-size: 14px;
        border: 1px solid #ddd;
        td {
          padding: 5px;
        }
      }
    }
    .GykjMap-reservoir-echarts {
      width: 100%;
      height: 100%;
      margin: auto;
      overflow: hidden;
      .GykjMap-reservoir-echart {
        width: 100%;
        height: 100%;
      }
      .GykjMap-reservoir-nodata {
        width: 100%;
        height: 100%;
        text-align: center;
        background-image: url("./img/noCount.png");
        background-position: center 35%;
        background-repeat: no-repeat;
      }
    }
  }
}
</style>
